nm<template>
    <div>
        <el-col class="main-col">
            <el-row class="first-row"><!--搜索框-->
                <el-col class="search-col"><!--白色背景-->
                    <el-row style="height:100%;width:100%;">
                        <el-col class="icon-col"><!--图标-->
                            <img src="../../assets/img/common/search.png" class="icon-img">
                        </el-col>
                        <el-col class="input-col"><!--输入框-->
                            <input placeholder="请输入书刊名称、关键字或作者" class="input-search" v-model="keywords">
                        </el-col>
                        <el-col class="btn-col"><!--搜索按钮-->
                            <button class="search-btn" @click="toSearchBooks">搜索</button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="second-row"><!--搜索结果-->
                <el-col class="result">
                    <el-row class="searchResult"><!--搜索结果展示-->
                         <el-col v-for="item in searchBooks" :key="item" class="book-col">
                            <el-row class="book-img-col"><img :src="item.img" class="search-img"></el-row>
                            <el-row class="search-font">{{ item.name }}</el-row>
                            <el-row class="search-btn-row">
                             <button v-if="!item.isBorrow" class="search-btn-bottom-ok" @click="borrowItem(item)">借阅</button><!--没有被借阅-->
                             <button v-if="item.isBorrow" class="search-btn-bottom-not">已借阅</button>
                           </el-row>
                         </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row style="background-color:white;width:100%;margin-top:50px;"><!--bottom-->
                <bottom></bottom>
            </el-row>
        </el-col>
    </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/userCommon/bottom.vue"
export default{
    name:"search",
    components:{
        bottom
    },
    mounted(){
        this.getAllBook()
    },
    data(){
        return{
            searchBooks:[
      
      ],
      keywords:'',
      userId:'24123'
            
        }
    },
    methods:{
        borrowItem(book) {
    axios({
        method:'get',
        url:'http://localhost:5000/reader/borrowClick',
        params:{
          'userId':this.userId,
          'bookName':book.name
    
        }
       
    }).then(r=>{//发送成功
      if(r.data.data.result==='借阅成功！'){
         // 进行借阅逻辑处理
    // 模拟借阅成功
    book.isBorrow = true;
    
    // 显示成功的消息提示框
    this.$message({
      message: '借阅成功',
      type: 'success'
    });
    this.getWaitBooks()
      }else{
        //借阅失败
        this.$message.error(r.data.data.content);
      }
    }).catch(r=>{
        console.log(r)
    })
  },
toSearchBooks(){
    axios({
        method:'get',
        url:'http://localhost:5000/reader/searchLibraryBooks',
        params:{
          'keywords':this.keywords
    
        }
       
    }).then(r=>{//发送成功
      this.searchBooks = r.data.data.books.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  getAllBook(){
    axios({
        method:'get',
        url:'http://localhost:5000/reader/getLibraryAll',
        params:{
         'userId':this.userId
    
        }
       
    }).then(r=>{//发送成功
      this.searchBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
          console.log(this.searchBooks)
    }).catch(r=>{
        console.log(r)
    })
  }

    }

}
</script>
<style scoped>
.main-col{
    width:100%;
  display: flex;
  padding-top: 40px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color:rgba(237, 237, 237, 1);

}
.first-row{
    width:100%;
    height:70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.second-row{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-col{
    width:70%;
    height:90%;
    background-color:rgba(255, 255, 255, 1);
    border-radius: 55px;
}
.icon-col{
    height:100%;
    width:10%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.input-col{
    width:76%;
    height:100%;
}
.btn-col{
    width:14%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-img{
    height:80%;
    width:auto;
}
.input-search{
    width:100%;
    height:100%;
    background-color: transparent;
    border-color:transparent;
    outline: none;
    font-size:18px;
}
.search-btn{
    height:70%;
    width:80%;
    border-radius: 40px;
    background-color: #394A79;
    color:white;
    border:transparent;
    font-size:18px;
    cursor: pointer;
    letter-spacing: 1.5px;
}
.result{
    width:90%;
    background-color: white;
    margin-top:30px;
    border-radius: 20px;
    padding-top:20px;
    padding-bottom:20px;
}
.searchResult{
    width:100%;
}
.book-col{
    width:20%;
    height:300px;
    margin-top:20px;
    margin-bottom: 20px;
}
.book-img-col{
    width:100%;
    height:70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-img{
    width:auto;
    height:100%;
    border-radius:15px ;
    box-shadow:10px 10px 15px 3px rgba(0,0,0,0.25);
}
.search-font{
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-btn-row{
    width:100%;
    height:20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-btn-bottom-ok{
    width:40%;
    height:60%;
    font-size:18px;
    background-color: rgba(125, 153, 191, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;

  }
  .search-btn-bottom-not{
    width:40%;
    height:60%;
    font-size:18px;
    background-color: rgba(166, 166, 166, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;
  }
</style>